<template>
  <div>
    <h2>每日访客统计</h2>
    <div id="chart-two" class="two"></div>
  </div>
</template>

<script setup>
import { inject, onMounted, reactive } from "vue";
import link from "@/api/link.js";
import apiUrl from "@/api/url.js";
let $echarts = inject("echarts");

onMounted(() => {
  let myChart = $echarts.init(document.getElementById("chart-two"));

  link(apiUrl.chartDataII).then((resolve) => {
    myChart.setOption({
      xAxis: {
        type: "category",
        data: resolve.data.day,
        boundaryGap: false,
      },
      yAxis: {
        type: "value",
      },
      legend: { top: "top" },
      tooltip: {},
      grid: {
        left: "1%",
        right: "4%",
        bottom: "20%",
        containLabel: true,
      },
      series: [
        {
          type: "line",
          name: "外卖",
          data: resolve.data.number.外卖,
          stack: "Total",
          smooth: true,
          label: {
            show: true,
          },
          areaStyle: {
            opacity: 0.5,
            color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(128,255,165)",
              },
              {
                offset: 1,
                color: "rgb(1,191,236)",
              },
            ]),
          },
          lineStyle: {
            width: 0,
          },
        },
        {
          type: "line",
          name: "快递",
          data: resolve.data.number.快递,
          stack: "Total",
          smooth: true,
          label: {
            show: true,
          },
          areaStyle: {
            opacity: 0.5,
            color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(0,255,221)",
              },
              {
                offset: 1,
                color: "rgb(77,119,255)",
              },
            ]),
          },
          lineStyle: {
            width: 0,
          },
        },
        {
          type: "line",
          name: "一般访客",
          data: resolve.data.number.一般访客,
          stack: "Total",
          smooth: true,
          label: {
            show: true,
          },
          areaStyle: {
            opacity: 0.5,
            color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(55,1462,255)",
              },
              {
                offset: 1,
                color: "rgb(116,21,210)",
              },
            ]),
          },
          lineStyle: {
            width: 0,
          },
        },
        {
          type: "line",
          name: "授权访客",
          data: resolve.data.number.授权访客,
          stack: "Total",
          label: {
            show: true,
          },
          smooth: true,
          areaStyle: {
            opacity: 0.5,
            color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(255,0,134)",
              },
              {
                offset: 1,
                color: "rgb(16,177,253)",
              },
            ]),
          },
          lineStyle: {
            width: 0,
          },
        },
      ],
    });
  });
});
</script>

<style scoped lang="scss">
h2 {
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
}
.two {
  height: 6.3rem;
}
</style>
